<template>
<form class="container" @submit="sureBackItem">
    
  <view class="backText">
    
    <view class="backTextContainer">
      <view class="backText_name">选择问题类型</view>
        <radio-group class="backTags_container" name="tags" @change="chooseTagFun">
          <label class="font_08" v-for="(tag, i) in tags" :key="i" :data-index="i" @click.stop="radioChange">
            <view :class="(chooseTag == i? 'activeTag':'')">{{tag.tagName }}</view>
            <radio :checked="chooseTag == i" :value="tag.tagName" hidden="true"></radio>
          </label>
        </radio-group>
    </view>  

    <view class="backTextContainer">
      <view class="backText_name">您的意见</view>
       <view class="inputContainer">
         <textarea name="content" maxlength="200" placeholder="请写下您的意见..." value></textarea>
      </view>
    </view>  
    
     <view class="backTextContainer">
      <view class="backText_name">您的称呼</view>
      <view class="inputContainer">
        <input name="name" value maxlength="10" placeholder="您的姓名（可不填）"></input>
      </view>
    </view>  

    <view class="backTextContainer">
      <view class="backText_name">您的联系方式</view>
      <view class="inputContainer">
        <input name="telno" maxlength="20" placeholder="您的联系方式（可不填）" value></input>
      </view>
    </view>  

      <view class="inputContainer">
        <button formType="submit" :style="'background:' + setting.platformSetting.defaultColor">提交</button>
      </view>
    
  </view>
</form>
</template>

<script>

export default {
  data() {
    return {
      setting: null,
      sentTagId: '',
      tags: [],
      chooseTag: 0
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {},

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    let setting = getApp().globalData.setting;
    let tags = setting.platformSetting.tagsMap['意见反馈'];
    console.log(tags);
    this.setData({
      setting: getApp().globalData.setting,
      tags: tags,
      sentTagId: tags[0].id
    });
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},
  methods: {
    radioChange: function (e) {
      let index = e.currentTarget.dataset.index;
      this.setData({
        chooseTag: index
      });
    },
    chooseTagFun: function (e) {
      console.log(e.detail.value);
      this.setData({
        sentTagId: e.detail.value
      });
    },
    // 上传
    sureBackItem: function (e) {
      let formResult = e.detail.value;
      let tag = this.sentTagId;

      if (!formResult.content) {
        wx.showToast({
          title: "您的意见为空",
          image: '/wxcomponents/images/icons/tip.png',
          duration: 2000
        });
        return;
      }

      if (formResult.telno) {
        let phoneTest = new RegExp('^1[3|4|5|7|8][0-9]{9}$', 'g');

        if (!phoneTest.test(formResult.telno)) {
          wx.showToast({
            title: "号码格式错误",
            image: '/wxcomponents/images/icons/tip.png',
            duration: 2000
          });
          return;
        }
      }

      console.log(formResult);
      var that = this;
      wx.showModal({
        title: '提示',
        content: '确认提交？',
        success: function (res) {
          if (res.confirm) {
            var customIndex = getApp().globalData.AddClientUrl("/user_guest_book.html", formResult, 'post');
            wx.request({
              url: customIndex.url,
              data: customIndex.params,
              header: getApp().globalData.headerPost,
              method: 'POST',
              success: function (res) {
                console.log(res.data);

                if (res.data.errcode == '0') {
                  wx.showToast({
                    title: '提交成功',
                    icon: 'success',
                    duration: 2000
                  });
                  setTimeout(function () {
                    wx.navigateBack();
                  }, 2000);
                } else {
                  wx.showToast({
                    title: res.data.errMsg,
                    image: '/wxcomponents/images/icons/tip.png',
                    duration: 2000
                  });
                }
              },
              fail: function (res) {}
            });
          } else if (res.cancel) {}
        }
      });
    },
    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style>
@import "./index.css";
</style>